<!-- 饼图 -->
<template>
  <div style="width: 100%;height: 100%;position: relative;">
    <div class="tab-group">
      <div 
        class="tab-btn" 
        :class="{ active: currentTab === 'beitai' }"
        @click="switchTab('beitai')"
      >
        北台
      </div>
      <div 
        class="tab-btn" 
        :class="{ active: currentTab === 'bancai' }"
        @click="switchTab('bancai')"
      >
        板材
      </div>
    </div>
    <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
    <Reacquire v-else @onclick="getData" style="line-height:200px">
      重新获取
    </Reacquire>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0
      },
      pageflag: true,
      timer: null,
      currentTab: 'beitai' // 默认选中北台
    };
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    this.clearData()

  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    // 切换标签页
    switchTab(tab) {
      this.currentTab = tab
      this.getData()
    },
    getData() {
      this.pageflag = true
      // this.pageflag =false

      //只打印一次
      if (!this.timer) {
        
      }
      
      // 根据当前选中的标签页生成不同的模拟数据
      let mockData
      if (this.currentTab === 'beitai') {
        // 北台数据
        mockData = {
          lockNum: Math.floor(Math.random() * (500 - 300) + 300),
          onlineNum: Math.floor(Math.random() * (1800 - 800) + 800),
          offlineNum: Math.floor(Math.random() * (200 - 50) + 50),
          totalNum: Math.floor(Math.random() * (1000 - 2000) + 1000)
        };
      } else {
        // 板材数据
        mockData = {
          lockNum: Math.floor(Math.random() * (800 - 500) + 500),
          onlineNum: Math.floor(Math.random() * (1200 - 600) + 600),
          offlineNum: Math.floor(Math.random() * (300 - 100) + 100),
          totalNum: Math.floor(Math.random() * (1500 - 2500) + 1500)
        };
      }
      
      this.countUserNumData = mockData
      this.$nextTick(() => {
        this.init()
      })

    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      let myChart = this.$refs.charts.chart
      myChart.on('mouseover', params => {
        this.clearData()
      });
      myChart.on('mouseout', params => {
        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      });
    },
    init() {
      let total = this.countUserNumData.totalNum;
      let colors = ["#ECA444", "#33A1DB", "#56B557", "#544981", "#5D55F5", "#E59F35"];
      let piedata = {
        center: ['50%', '40%'],
        name: "车数汇总",
        type: "pie",
        radius: ["42%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 2,
        },

        color: colors,
        data: [
          // {
          //   value: 0,
          //   name: "告警",
          //   label: {
          //     shadowColor: colors[0],
          //   },
          // },
          {
            value: this.countUserNumData.lockNum,
            name: "基地1",
            label: {
              shadowColor: colors[0],
            },
          },
          {
            value: this.countUserNumData.onlineNum,
            name: "基地2",
            label: {
              shadowColor: colors[2],
            },
          },
          {
            value: this.countUserNumData.lockNum,
            name: "测试基地",
            label: {
              shadowColor: colors[1],
            },
          },
          {
            value: this.countUserNumData.offlineNum,
            name: "空军基地",
            label: {
              shadowColor: colors[3],
            },
          },
          {
            value: this.countUserNumData.onlineNum,
            name: "地下基地",
            label: {
              shadowColor: colors[4],
            },
          },


        ],
      };
      this.options = {
        title: {
          // zlevel: 0,
          text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
          top: "35%",
          left: "center",
          textStyle: {
            rich: {
              value: {
                color: "#ffffff",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 20,
              },
              name: {
                color: "#ffffff",
                lineHeight: 20,
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          show: true,
          orient: 'horizontal',
          bottom: '2%',
          left: "center",
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          //展示圆点
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
              //   position: "outside",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                per: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 12, // 第一段线 长度
              length2: 18, // 第二段线 长度
              show: true,
            
            },
              emphasis: {
                show: true,
              },
          },
          {
            ...piedata,
            tooltip: { show: true },
            itemStyle: {},
            label: {
              backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: "auto",
              padding: [2.5, -2.5, 2.5, -2.5],
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: false,
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.tab-group {
  position: absolute;
  top: -28px;
  right: 20px;
  display: flex;
  // gap: 10px;
  // margin-bottom: 10px;
  justify-content: center;
  font-size: 12px;

  .tab-btn {
    width: 50px;
    height: 18px;
    border: 1px solid #00eded;
    color: #00f7f6;
    text-align: center;
    line-height: 18px;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
      0 0 6px rgba(0, 237, 237, 0.4);
    transition: all 0.3s ease;

    &:hover {
      background-color: rgba(3, 194, 194, 0.3);
    }

    &.active {
      background-color: #03c2c2;
      color: #fff;
    }
  }
}
</style>